<template>
  <view class="main" v-if='flag'>
    <view class="title">申请成为配送员 <text v-if="statusFlag">({{status}})</text></view>
    <view class="text-clamp2" v-if="falseMsg.length > 0">
      申请失败原因：{{falseMsg}}
    </view>
    <!-- 身份证头像照 -->
    <view class="continer">
      <view class="continer_title">身份证头像照</view>
      <view @click="upload(0)">
        <view v-if="uploadImgUrl[0] == null" class="add"></view>
        <img v-else class="img" :src="uploadImgUrl[0]" mode="widthFix">
      </view>
    </view>
    <view style="border-bottom: 1rpx solid #ccc;margin: 5%;"></view>

    <!-- 身份证国徽照 -->
    <view class="continer">
      <view class="continer_title">身份证国徽照</view>
      <view @click="upload(1)">
        <view v-if="uploadImgUrl[1] == null" class="add"></view>
        <img v-else class="img" :src="uploadImgUrl[1]" mode="widthFix">
      </view>
    </view>
    <view style="border-bottom: 1rpx solid #ccc;margin: 5%;"></view>

    <!-- 课表照片 -->
    <view class="continer">
      <view class="continer_title">课表照片</view>
      <view @click="upload(2)">
        <view v-if="uploadImgUrl[2] == null" class="add"></view>
        <img v-else class="img" :src="uploadImgUrl[2]" mode="widthFix">
      </view>
    </view>
    <view style="border-bottom: 1rpx solid #ccc;margin: 5%;"></view>

    <!-- 提交按钮 -->
    <button type="primary" @click="onCommitApply">提交申请</button>
    <view class="bt" style="height: 40rpx"></view>
  </view>
</template>

<script>
  // 按需导入 mapState 辅助函数
  import {
    mapState,
  } from 'vuex'

  export default {
    name: "my-applyRunner",
    computed: {
      // 将 m_user 模块中的 userinfo 映射到当前页面中使用
      ...mapState('m_user', ['token']),
    },
    data() {
      return {
        flag: false,
        falseMsg: '',
        uploadImgUrl: [],
        uid: '',
        statusFlag: false,
        status: '',
      };
    },
    onLoad(options) {
      this.uid = options.uid;;
      // console.log(this.uid)
      this.getRunnerDetailInfo()
      setTimeout(() => {
        flag: true;
      }, 1500)
    },
    methods: {
      // 初始化数据
      async getRunnerDetailInfo() {
        const {
          data: result
        } = await uni.$http.post("/api/READ/api/my/runner-detail/list/" + this.uid)
        if (result.code != '200') return uni.$showMsg(result.msg);
        // console.log(result);
        if (result.data != null){
          this.uploadImgUrl[0] = result.data.sfzFaceUrl;
          this.uploadImgUrl[1] = result.data.sfzReverseUrl;
          this.uploadImgUrl[2] = result.data.sourceUrl;
          // 状态 0 无状态 1 提交 2 失败 3 通过
          if (result.data.status == '1') {
            this.status = '正在审核中';
            this.statusFlag = true;
          } else {
            this.statusFlag = false;
          }
        }
        
        this.flag = true;
      },
      // 提交申请
      async onCommitApply(){
        const {
          data: result
        } = await uni.$http.post("/api/READ/api/my/runner-detail/commit/" + this.uid)
        if (result.code != '200') return uni.$showMsg(result.msg);
        uni.$showMsg("提交成功");
        console.log(result);
      },
      // 上传文件
      async upload(type) {
        console.log("上传")
        uni.chooseImage({
          success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            // console.log(tempFilePaths)
            uni.uploadFile({
              url: 'http://localhost/api/READ/api/my/runner-detail/upload/runner', //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: 'file',
              header: {
                token: this.token,
                type: type,
              },
              formData: {
                'user': 'test'
              },
              success: (uploadFileRes) => {
                this.flag = false;
                var result = JSON.parse(uploadFileRes.data)
                if (result.code != '200') return uni.$showMsg("上传失败");
                this.uploadImgUrl[type] = result.data
                // console.log(this.uploadImgUrl);
                // console.log(uploadFileRes)
                this.flag = true;
                return uni.$showMsg("上传成功");
              },
              fail: (res) => {
                return uni.$showMsg("上传失败");
              }
            });
          }
        });
        setTimeout(() => {
          flag: true;
        }, 1500)
      },
    }
  }
</script>

<style lang="scss">
  .main {
    margin: 5%;
  }

  .title {
    font-size: 35rpx;
    font-weight: bold;
  }

  .continer {
    width: 100%;
    // border: 1px solid red;
  }

  .img {

    display: block;
    max-width: 99%;
    max-height: 450rpx;
    border: 1px solid green;
  }

  .continer_title {
    color: #00AA00;
    text-align: center;
    margin: 4% 0 4% 0;
  }

  .text-clamp2 {
    color: red;
    font-size: 35rpx;
    margin: 5% 0 0 0;
    width: 90%;
    display: inline-block;
    white-space: pre-wrap;
    word-wrap: break-word;
    height: auto;
  }

  .bt {
    margin-bottom: 20px;
  }

  .add {
    display: inline-block;
    width: 98%;
    height: 100px;
    color: #ccc;
    border: 2px dashed;
    text-indent: -12em;
    transition: color .25s;
    position: relative;
    overflow: hidden;
  }

  .add:hover {
    color: #34538b;
  }

  .add::before,
  .add::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .add::before {
    width: 20px;
    border-top: 4px solid;
    margin: -2px 0 0 -10px;
  }

  .add::after {
    height: 20px;
    border-left: 4px solid;
    margin: -10px 0 0 -2px;
  }
</style>
